<template>
    <div v-if="payIndex == 1">
        <div class="search-box">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索客户名称/负责人"
                placeholder-style="color: #9EA1BB;letter-spacing:2rpx;" @input="inputEnter" />
        </div>
        <div class="transverse-line row">
            <div class="transverse-right align-flex">
                <div class="previously align-flex row">
                    <div class="align-flex">
                        <picker mode="date" fields="month" :value="pickdate" @change="bindPickerChangedate">
                            <view class="uni-input">{{ pickdate }}</view>
                        </picker>
                        <img class="transverse-down" src="/static/score/dropdown.png" alt="" />
                    </div>
                    <div class="align-flex">
                        <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
                            <view class="uni-input">{{ LongPlanInfoName[sortIndexMethod] }}</view>
                        </picker>
                        <img class="transverse-down" src="/static/score/dropdown.png" alt="" />
                    </div>
                    <div class="compositor align-flex">
                        <picker @change="bindPickerChangeCompany" :value="sortIndexCompany" :range="longCompanyNameAll">
                            <view class="uni-input">{{ longCompanyNameAll[sortIndexCompany] }}</view>
                        </picker>
                        <img class="transverse-down" src="/static/score/dropdown.png" alt="" />
                    </div>

                    <div class="compositor align-flex">
                        <picker @change="bindPickerChange" :value="sortIndex" :range="sortArray">
                            <view class="uni-input">排序</view>
                        </picker>
                        <img class="transverse-down" src="/static/score/compositor.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="in-number">共有{{ longInsuranceTotalCount == '' ? 0 : longInsuranceTotalCount }}条记录</div>
        <!-- 第一个数据框 -->
        <div class="substance" v-for="(item) in longInsuranceData" :key="item.companyId"
            @click="goCompany(item.companyId, item.dealId)">
            <div class="rubric-row">
                <div class="rubric">{{ item.companyName }}</div>
            </div>
            <div class="all-type flex-align">
                <span class="insurance-mode" v-if="item.insurCompanyYg === 1">阳光保险</span><span class="insurance-mode"
                    v-if="item.insurCompanyZgrs === 1">中国人寿</span><span class="insurance-mode"
                    v-if="item.insurCompanyXdc === 1">现代财</span>
                <!--            <div class="tips-box company-type">{{item.insurCompany == 'period_001_zgrs'? '中国人寿' : item.insurCompany == 'period_002_xdc' ? '现代财' : item.insurCompany == 'period_003_yg'? '阳光保险' :''}}</div>-->
                <!--            <div class="tips-box insurance-type">{{item.isMonthMode == 0? '灵活保单' : item.isMonthMode == 1? '月保单' : item.isMonthMode == 2?'即时生效':''}}</div>-->
                <div class="tips-box insurance-type" v-for="(i, j) in item.insurCompanyTypes" :key="j">{{ i }}</div>
                <div class="tips-box insurance-type" v-for="(i, j) in item.insureModes" :key="j">{{ i }}</div>
                <!-- <div class="tips-box insurance-type" v-if="item.isMonth === 1">月保单</div>
                <div class="tips-box insurance-type" v-if="item.isFlexible === 1">灵活保单</div>
                <div class="tips-box insurance-type" v-if="item.isImmediate === 1">即时生效</div> -->
                <!--            <div class="tips-box insurance-type" v-if="item.isOneClass === 1">1-3类</div>-->
                <!--            <div class="tips-box insurance-type" v-if="item.isFourClass === 1">4类</div>-->
                <!--            <div class="tips-box insurance-type" v-if="item.isFiveClass === 1">5类</div>-->
            </div>
            <div class="circumstance align-flex">
                <div class="circumstance-left">
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">商务负责人：</div>
                        <text class="explicit"> {{ item.salesName }} </text>
                    </div>
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">业绩保费：</div>
                        <text class="explicit"> ¥{{ item.countEnsureFee }} </text>
                    </div>
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">当前在保：</div>
                        <text class="explicit"> {{ item.ensureCount }}人 </text>
                    </div>
                </div>
            </div>
        </div>
        <no-Data v-if="longInsuranceTotalCount == ''"></no-Data>
        <!-- 第二个数据框 -->
        <!-- 选择昨天、今天、本周、本月数据弹窗 -->
        <!-- 运营数据  排序弹窗 -->
        <div>
            <uni-popup ref="thirdPopup" :type="type" background-color="#fff">
                <div class="second-popup third-popup">
                    <div class="select-spectacle">排序</div>
                    <div :class="[
                        'status-box',
                        sortSequence == item.id ? 'status-box-blue' : ''
                    ]" v-for="(item, index) in sorting" :key="index" @click="serialNumber(item.id)">
                        <div class="state-condition">{{ item.name }}</div>
                        <div class="hook" v-if="sortSequence == item.id">✔</div>
                    </div>
                </div>
            </uni-popup>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import noData from '@/components/no-data/no-data.vue'
import {
    getLongCompany,
    getLongPlanData,
    getLongInsuranceDetail
} from '@/api/quick'
import user from '@/utils/user'
import { onLoad } from '@dcloudio/uni-app'
import { shake } from '@/utils/util'
import dayjs from 'dayjs'
/* 销售记录昨天 弹窗 */

onLoad(async () => {
    await user.waitLogin()
    pickdate.value = dayjs().format('YYYY-MM')
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    LongPlanData()
    uni.$on('onCallBack', function (data) {
        longInsuranceDetail()
    })
    longCompany()
    uni.$on('onReachBottom', function (data) {
        console.log('onReachBottom')
        getmore()
    })
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// 时间框选择
const time = ref([
    {
        name: '昨天',
        id: 1
    },
    {
        name: '今天',
        id: 2
    },
    {
        name: '本周',
        id: 3
    },
    {
        name: '本月',
        id: 4
    }
])

defineProps(['payIndex'])
// 运营数据  昨天、明天、本周、本月、自定义
const operateIndex = ref(3)
const itemRange = ref('' as string | undefined)
const operateData = ref(['昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref()
const itemRangeFour = ref()
const hasNextPage = ref(true)
const pageNum = ref(1)
const bindPickerChangeOperate = async (index: { index: number, time: string }) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    operateIndex.value = index.index
    itemRange.value = index.time
    startTime.value = index.startTime
    endTime.value = index.endTime
    itemRangeThree.value = itemRange.value.split(' 至 ')[0]
    itemRangeFour.value = itemRange.value.split(' 至 ')[1]
    pageNum.value = 1
    await longInsuranceDetail()
}
// 到达底部
const getmore = () => {
    if (!hasNextPage.value) {
        return
    }
    pageNum.value += 1
    longInsuranceDetail()
}

// 长期保投保方式数据
const LongPlanInfo = ref([] as { insuranceMethod: string, metho: string }[])

const LongPlanInfoName = ref([] as string[])
const LongPlanInfoType = ref([] as any[])

// 长期保投保方式
const LongPlanData = async () => {
    const result = await getLongPlanData()
    console.log(result, '长期保投保方式')
    LongPlanInfo.value.push(...result)
    console.log(LongPlanInfo.value, '长期保投保方式2222222222')
    LongPlanInfoName.value = LongPlanInfo.value.map((item: { insuranceMethod: string, metho: string }) => {
        return item.insuranceMethod
    })

    LongPlanInfoName.value.unshift('全部方式')
    LongPlanInfoType.value = LongPlanInfo.value.map((item: { insuranceMethod: string, metho: boolean | string }) => {
        return item.metho
    })
    LongPlanInfoType.value.unshift('')
    console.log(LongPlanInfoType.value, '长期保投保方式333333333')
}

/* 时间 弹窗 */
const sortIndexTime = ref(0)
const bindPickerChangeTime = async function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndexTime.value = e.detail.value
    pageNum.value = 1
    await longInsuranceDetail()
}

/* 全部方式 全部方式 弹窗 */
const sortIndexMethod = ref(0)
const bindPickerChangeMethod = async function (e: any) {
    console.log('全部方式，携带值为这个是啥', e.detail.value)
    sortIndexMethod.value = e.detail.value
    pageNum.value = 1
    await longInsuranceDetail()
}
const pickdate = ref()
const bindPickerChangedate = async function (e: any) {
    console.log('全部方式，携带值为这个是啥', e.detail.value)
    pickdate.value = e.detail.value
    pageNum.value = 1
    await longInsuranceDetail()
}
// 全部保司 公司 变量
const sortIndexCompany = ref(0)
// const insuranceDate = ref(['100万'] as string[])
// 公司
const bindPickerChangeCompany = async (e: any) => {
    sortIndexCompany.value = e.detail.value
    console.log('picker发送选择改变，携带值为2222222222222222222222222', e.detail.value)
    pageNum.value = 1
    await longInsuranceDetail()
    console.log(sortIndexCompany.value, '哈哈哈哈哈哈')
}

// 获取长期保保司
const longCompanyName = ref(0)
const longCompanyNameAll = ref(0)
// 长期保方案类型
const longinsurCompany = ref([] as string[])
const longCompany = async () => {
    const result = await getLongCompany()
    console.log(result, '获取长期保保司')
    longCompanyName.value = result.map((item: { insurCompany: string, name: string }, company: string) => {
        return item.name
    })
    console.log(longCompanyName.value, 'longCompanyName.value')
    longinsurCompany.value = result.map((item: { insurCompany: string, name: string }, insurCompany: string) => {
        return item.insurCompany
    })
    longinsurCompany.value.unshift('')

    longCompanyNameAll.value = result.map((item: { insurCompany: string, name: string }, company: string) => {
        return item.name
    })
    longCompanyNameAll.value.unshift('全部保司')
    longCompanyName.value.unshift('全部保司')
    // longinsurCompany.value.unshift('全部保险公司')
    // console.log(longinsurCompany.value, '获取长期保保司类型11111111112222222222')
    // console.log(longCompanyNameAll.value, '全部保险公司.value')
}

const inputValue = ref('')

const inputEnter = (e: any) => {
    shake(() => {
        console.log(e.detail.value, 'eeeeeany')
        inputValue.value = e.detail.value.toString()
        console.log(inputValue.value, 'eeeeeany2222')
        pageNum.value = 1
        longInsuranceDetail()
    }, 300)
}
const startTime = ref('')
const endTime = ref('')
const longInsuranceData = ref([] as any)
const longInsuranceTotalCount = ref()

const longInsuranceDetail = async () => {
    if (pageNum.value == 1) {
        longInsuranceData.value = []
        pageNum.value = 1
        hasNextPage.value = true
    }
    console.log(LongPlanInfoType.value, sortIndexMethod.value, '这个是什么')
    const result = await getLongInsuranceDetail({
        pageNum: pageNum.value,
        pageSize: 4,
        isMonthMode: sortIndexMethod.value === 0 ? '' : sortIndexMethod.value - 1 === -1 ? '' : sortIndexMethod.value - 1,
        insurCompanyType: longinsurCompany.value[sortIndexCompany.value] === '' ? '' : longinsurCompany.value[sortIndexCompany.value] || '',
        sortOrder: sortIndex.value,
        searchText: inputValue.value || '',
        insureMonth: pickdate.value
        // startTime: operateIndex.value > 800 ? itemRangeThree.value : startTime.value,
        // endTime: operateIndex.value > 800 ? itemRangeFour.value : endTime.value
    })
    console.log(result, '投保明细3333333')
    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    const arr = []
    arr.push(...longInsuranceData.value)
    arr.push(...result.list)
    longInsuranceData.value = arr
    console.log(longInsuranceData.value, 'longInsuranceData')
    longInsuranceTotalCount.value = result.totalCount
}

// 返回时间

/* 运营数据 排序 弹窗 */
const sortSequence = ref(1)
const sorting = ref([
    {
        name: '默认排序',
        id: 1
    },
    {
        name: '按付款时间倒序',
        id: 2
    },
    {
        name: '按付款时间正序',
        id: 3
    },
    {
        name: '按到期时间倒序',
        id: 4
    },
    {
        name: '按到期时间正序',
        id: 5
    }
])
const serialNumber = (params: number) => {
    sortSequence.value = params
}

/* 运营数据 排序 弹窗 */
const sortIndex = ref(0)
const sortArray = ref(['按保费降序排列', '按保费升序排列'])
const bindPickerChange = function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndex.value = e.detail.value
    pageNum.value = 1
    longInsuranceDetail()
}

const goCompany = (companyId: number, dealId: number) => {
    if (!dealId) {
    } else {
        console.log(companyId, '公司id', dealId, 'dealId')
        const company = companyId
        const deal = dealId
        uni.navigateTo({
            url: '/packageRemind/pages/longInsurance-detail/index?id=' + company + '&dealId=' + deal
        })
    }
}
</script>

<style lang="scss" scoped>
.transverse-line {
    box-sizing: border-box;
    color: #565868;
    font-size: $font-normal;

    .previously,
    .spectacle,
    .compositor {
        box-sizing: border-box;
        font-weight: 400;
    }
}

.previously {
    width: 100%;
}

.in-number {
    font-size: 28rpx;
    font-weight: 400;
    color: $grey;
    padding-top: 30rpx;
}

/* payIndex==1 部分 */
.search-box {
    margin: 30rpx 0;
}

.substance {
    margin: 30rpx 0;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;

    .rubric-row {
        display: flex;

        .rubric {
            font-size: 30rpx;
            font-weight: 600;
            color: $black;
            padding-bottom: 30rpx;
        }
    }

    .exercise-problems {
        padding-top: 30rpx;
        font-size: $font-normal;
        font-weight: 400;
        color: $grey;

        .explicit {
            color: $black;
        }

        .nomenclature {
            width: 165rpx;
        }
    }

    .circumstance-right {
        padding-left: 58rpx;
    }
}

.circumstance {
    border-top: 1px solid #F4F4F7;
}

.transverse-down {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
}

.pop-up {
    border-radius: 16rpx;

    .choices {
        width: 750rpx;
        height: 564rpx;
        background: #ffffff;
        opacity: 1;
        box-sizing: border-box;
        padding: 30rpx;
        border-radius: 16rpx;

        .custom-img {
            width: 36rpx;
            height: 36rpx;
        }

        .select-while {
            font-size: $font-medium;
            font-weight: bold;
            color: $black;
            padding: 30rpx;
        }
    }

    .choices-picker {
        height: 800rpx;
    }

    .sequence-time {
        padding: 20rpx 30rpx 27rpx 29rpx;
        display: flex;
        justify-content: space-between;

        .specific-blue {
            color: $blue;
        }

        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }
}

.second-popup {
    width: 750rpx;
    height: 388rpx;
    background: #ffffff;
    box-sizing: border-box;
    padding: 60rpx 60rpx 27rpx 60rpx;

    .select-spectacle {
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .status-box {
        color: #565868;
        padding-top: 50rpx;
        display: flex;
        justify-content: space-between;

        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }

    .status-box-blue {
        color: $blue;
    }
}

.third-popup {
    height: 564rpx;
}

.transverse-right {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.compositor {
    padding-left: 30rpx;
}

.compositor-none {
    padding-left: 0;
}

.company-type {}

.all-type {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .tips-box {
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        background: #F4F4F7;
        padding: 8rpx 10rpx 11rpx 10rpx;
        box-sizing: border-box;
        margin-right: 8px;
        color: #565868;
    }

    .company-type {
        background: #EBEFFE;
        color: #3E5FF5;
    }
}

.table-title {
    font-size: 24rpx;
}

.insurance-mode {
    background: #EBEFFE;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    padding: 8rpx 15rpx 10rpx;
    color: $blue;
    margin-right: 15rpx;
}
</style>
